import React from 'react'

import {withRouter, useHistory} from 'react-router-dom'
//withRouter 高阶组件修饰后的组件可以获取到路由信息
//useHistory 组件，可以实现路由操作，如：跳转，重置链接


import { Button,Row, Col } from 'antd'

export default props => {
  console.log(props);
  return (
    <div>
      <GoHome />
      <ShopDetail />
      <ChangeContent />
    </div>
  )
}

const GoHome = withRouter(props => {
  const {history} = props
  return (
    <Row gutter={[16,16]}>
      <Col offset={4}><Button type="primary" onClick={() => history.push('/hooks')}>前往首页</Button></Col>
      <Col offset={4}><Button type="primary" onClick={() => history.goBack()}>返回</Button></Col>
    </Row>
  )
})

const ShopDetail = () => {
  const h = useHistory()
  console.log(h);
  return (
    <Row gutter={[16,16]}>
      <Col><Button type="primary">商品1</Button></Col>
      <Col push ={12} span={4}><Button>商品2</Button></Col>
    </Row>
  )
}

const ChangeContent = () => {
  return (
    <Row gutter={[16,16]}>
      <Col span={8} offset={2}><Button type="dashed">内容1</Button></Col>
      <Col><Button type="dashed" danger>内容2</Button></Col>
    </Row>
  ) 
}
